<template>
  <div class="box">
    <span class="layui-badge-dot"></span>
    <span v-for="color in colors" :key="color" :class="['layui-badge-dot', `bg-${color}`]"></span>
    <fieldset>
      <legend>发布新任务</legend>
      <fieldset style="border: 1px solid #DCDFE6">
        <legend>填写新任务的信息</legend>
        <form class="message">
          <el-input placeholder="请输入标题" v-model="title">
            <template slot="prepend">任务标题</template>
          </el-input>
          <el-input placeholder="请输入奖励" v-model="reward">
            <template slot="prepend">奖励</template>
          </el-input>
          <el-autocomplete
              class="inline-input"
              v-model="school"
              :fetch-suggestions="querySearch"
              placeholder="输入选择"
              @select="handleSelect"
              :popper-append-to-body="false">
            <template #prepend>学校</template>
          </el-autocomplete>
          <div class="textarea-container">
            <div class="label">详细描述</div>
            <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="textarea" label="详细描述">
            </el-input>
          </div>
          <el-button class="publish-button">发布</el-button>
        </form>
        <el-button disabled style="margin-bottom: 20px">状态被限制,无法发布</el-button>
      </fieldset>
    </fieldset>
  </div>
</template>
<script>
export default {
  name: "UserHaveNewTask",
  data(){
    return{
      colors: ['orange', 'green', 'cyan', 'blue', 'gray'],
      school: '',
      textarea: '',
    }
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {value: '中山大学'},
        {value: '广州大学'},
        {value: '清华大学'}
      ]
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}

</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  padding: 30px;
}

.layui-badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: pink;
  margin: 2px;
}

.bg-orange {
  background-color: #FFB900;
}

.bg-green {
  background-color: #009688;
}

.bg-cyan {
  background-color: #03A9F4;
}

.bg-blue {
  background-color: #2196F3;
}

.bg-gray {
  background-color: #9E9E9E;
}

fieldset{
  padding-left: 20px;
  border: 0;
  border-top: 1px solid #DCDFE6;
  margin: 10px 50px 0 50px;
  font-size: 20px;
  height: 98%;
}


fieldset legend{
  padding: 0 10px;
}

.message{
  margin: 20px 20px 20px 0;
}
::v-deep .message .el-input{
  margin: 10px 0;
}
::v-deep .message .el-input-group__prepend{
  width: 100px;
  text-align: center;
}
::v-deep .message .el-input__inner{
  width: 846px;
}
::v-deep .el-textarea__inner {
  border-radius: 0 !important;
}

.label{
  font-size: 14px;
  background: #fafafa;
  padding: 8px 15px;
  border: 1px solid #DCDFE6;
  margin-top: 10px;
}
.publish-button {
  height: 35px;
  padding: 0 20px !important;
  margin-top: 20px;
  background: #16BAAA;
  color: #fff;
}

</style>